import React,{Component} from 'react'
import {
  Route,
  Link
} from 'react-router-dom'
import CategoryDetail from './CategoryDetail'
export default class Category extends Component{
    render(){
        const {match} = this.props
        console.log(match)
        return(
            <div>
                <h2>Topics</h2>
                <ul>
                <li>
                    <Link to={`${match.url}/rendering`}>
                    Rendering with React
                    </Link>
                </li>
                <li>
                    <Link to={`${match.url}/components`}>
                    Components
                    </Link>
                </li>
                <li>
                    <Link to={`${match.url}/props-v-state`}>
                    Props v. State
                    </Link>
                </li>
                </ul>

                <Route path={`${match.url}/:topicId`} component={CategoryDetail}/>
                <Route exact path={match.url} render={() => (
                    <h3>Please select a topic.</h3>
                )}/>
            </div>
        )
    }
}